<template>
	<view>
		<view class="a-center order-top wid-100">
			<view class="mar-left40 mar-right40" v-if="formData.status==0">
				<view class="white-zt font-28 line-h38 font-w-b">派单中</view>
				<view class="white-zt font-26 mar-top10 line-h38">正在为您选择最合适的服务人员，请耐心等待！</view>
			</view>
			<view class="mar-left40 mar-right40" v-if="formData.status==1">
				<view class="white-zt font-28 line-h38 font-w-b">等待接单</view>
				<view class="white-zt font-26 mar-top10 line-h38">正在等待服务人员接单，请耐心等待！</view>
			</view>
			<view class="mar-left40 mar-right40" v-if="formData.status==2">
				<view class="white-zt font-28 line-h38 font-w-b">已接单-等待服务</view>
				<view class="white-zt font-26 mar-top10 line-h38">您的预约已接单，服务人员将会在预约时间里达到！</view>
			</view>
			<view class="mar-left40 mar-right40" v-if="formData.status==3">
				<view class="white-zt font-28 line-h38 font-w-b">已完成</view>
				<view class="white-zt font-26 mar-top10 line-h38">您的预约服务已完成，感谢您的支持！</view>
			</view>
			<view class="mar-left40 mar-right40" v-if="formData.status==4">
				<view class="white-zt font-28 line-h38 font-w-b">已取消</view>
				<view class="white-zt font-26 mar-top10 line-h38">您的预约服务已取消，感谢您的支持！</view>
			</view>
		</view>
		<!-- 收货地址 -->
		<view class="address white-bj pad-t-20  pad-b-20 pad-l-20 pad-r-20 border-r-20 box-sizing mar-top30 box-sizing" @tap="open('add')">
			<view class="you a-center j-sp">
				<view class="icon-position main-zt"></view>
				<view class="mar-left15">
					<view class="font-26 font-w-b line-h35">{{formData.linkman}} {{formData.tel}}</view>
					<view class="font-22 line-h32 black50-zt mar-top10">{{formData.province}}{{formData.city}}{{formData.district}}{{formData.area}}{{formData.address}}{{formData.house_number}}</view>
				</view>
				<view class="icon-jinru black60-zt"></view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="wid-100 shop white-bj pad-t-40  pad-b-40 pad-l-30 pad-r-30 mar-top20 box-sizing">
			<view class="a-center j-sp font-28 mar-bottom50">
				<view>服务名称</view>
				<view class="black60-zt mar-right10">
					<text> {{formData.name}}</text>
				</view>
			</view>
			<view class="a-center j-sp font-28 mar-bottom50">
				<view>服务次数</view>
				<view class="black60-zt mar-right10 font-w-b">
					<text> {{formData.y_num}}/{{formData.num}}</text>
				</view>
			</view>
			<view class="a-center j-sp font-28 mar-bottom50">
				<view>预约日期</view>
				<view class="a-center black60-zt">
					<uni-datetime-picker v-model="formData.yu_yue_date" :disabled="!isEdit" :start="timeNow" type="date" :border="false" style="width: 400rpx;height: 110rpx;line-height: 110rpx;text-align: right;font-size: 24rpx;">{{formData.yu_yue_date|birthdayData}}</uni-datetime-picker>
					<view class="icon-jinru"></view>
				</view>
			</view>
			<view class="a-center j-sp font-28 mar-bottom50">
				<view>预约到达时间</view>
				<view class="a-center">
					<view @tap="show" class="black60-zt">{{startTimeData|endTimeData}}</view>
					<view class="icon-jinru"></view>
				</view>
			</view>
			<view class="font-28">
				<view>备注</view>
				<view class="black60-zt mar-top20">
					<textarea placeholder="请填写备注内容..." :disabled="!isEdit" v-model="formData.remark" placeholder-class="font-26" class="border-1-91 wid-100 box-sizing"></textarea>
				</view>
				
			</view>
		</view>
		<view class="heightTop"></view>
		<view class="heightTop"></view>
		<!-- 底部操作 -->
		<view class="foot position-fixed p-bottom wid-100 white-bj a-center pad-l-30 pad-r-30 pad-t-30 pad-b-30 font-26 box-sizing">
			<view class="jdhong-bj border-r center text-center line-h80 white-zt mar-right15 mar-bottom20" v-if="isEdit" @tap="pay(formData)">确定修改</view><!-- 立即预约 -->
			<view class="black50-bj border-r pad-l-30 pad-r-30 pad-t-15 pad-b-15 white-zt mar-right15 mar-bottom20" v-if="formData.status<3&&isEdit==false" @tap="cancel(formData)">取消</view><!-- 取消 -->
			<view class="jdhong-bj border-r pad-l-30 pad-r-30 pad-t-15 pad-b-15 white-zt mar-right15 mar-bottom20" v-if="formData.status<3&&isEdit==false" @tap="Receber(formData)">修改预约</view><!-- 确认收货 -->
		</view>
		<tpf-time-range
		ref="time" 
		:startTime="startTime" 
		:startDefaultTime="formData.start_default_time"
		:endTime="endTime"
		:endDefaultTime="formData.end_default_time"
		@timeRange="timeRange"
		>
		</tpf-time-range>
	</view>
</template>

<script>
	import uniDatetimePicker from "@/pagesC/pages_com/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"
	export default{
		components:{
			uniDatetimePicker
		},
		data(){
			return{
				id:undefined,
				user_id:undefined,
				formData:{
					aid:1,
					mid:undefined,
					xid:undefined,
					address_id:undefined,
					start_default_time:"07:00",
					end_default_time:"09:00",
					yu_yue_date:"",
					remark:""
				},
				region:[],
				address:{},
				isEdit:false,
				startTime:"07:00",
				endTime:"22:00",
				startTimeData:"",
				timeNow:""
			}
		},
		filters:{
			birthdayData(data){
				if(data==''){
					return "请选择预约日期"
				}else{
					return data
				}
			},
			endTimeData(data){
				if(data==''){
					return "请选择到达时间"
				}else{
					return data
				}
			}
		},
		onLoad(e) {
			this.id=parseFloat(e.id)
			this.user_id=parseFloat(this.$user.state.userId)
			this.formData.mid=parseFloat(this.$user.state.userId)
			this.formData.xid=parseFloat(e.id)
			this.GetOrderInfo()
			this.timeNow=this.NowTime()
		},
		onShow() {
			let that = this
			//接收下级页面传回的数据
			uni.$on('updateData',data=>{
				if(!that.IsFuwu(data)){
					that.address = {}
					that.formData.address_id=undefined
					setTimeout(()=>{
						uni.showToast({
							icon:"none",
							title:"当前地址不可用，请选择服务地址！"
						})
					},500)
				}else{
					that.address = data
					that.formData.linkman=data.name
					that.formData.tel=data.tel
					that.formData.province=data.province
					that.formData.city=data.city
					that.formData.district=data.district
					that.formData.area=data.area
					that.formData.address=data.address
					that.formData.house_number=data.house_number
					that.formData.latitude=data.latitude
					that.formData.longitude=data.longitude
				}
			})
		},
		methods:{
			//取消预约
			cancel(){
				uni.showModal({
					title:'提示',
					content:'取消预约服务请确保您的距离预约时间大于3小时，如果小于3小时将正常扣除次数～',
					cancelText:"取消",
					confirmText:"确定",
					success: (res) => {
						if (res.confirm) {
							this.$api.CancelFuwuYu(this.formData).then(res1=>{
								if(res1.code==0){
									uni.showToast({
										icon:"success",
										title:"取消成功!",
										duration:2000
									})
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1500)
								}
							})
						}
					}
				})
			},
			//获取当前日期
			NowTime(){
				const now = new Date(); 
				const year = now.getFullYear(); // 年
				const month = now.getMonth() + 1; // 月
				const date = now.getDate()+1; // 日
				
				return year+"-"+month+"-"+date
			},
			show(){
				if(this.isEdit){
					this.$refs['time'].open();
				}else{
					this.tishi()
				}
			},
			timeRange(e){
				console.log(e);
				this.formData.start_default_time=e[0]
				this.formData.end_default_time=e[1]
				this.startTimeData=e[0]+"-"+e[1]
			},
			//点击修改
			Receber(){
				this.isEdit=true
			},
			//打开页面或者弹窗
			open(type){
				switch (type){
					case "add":
						if(this.isEdit){
							uni.navigateTo({
								url:'/pagesB/address/addressList?type='+1
							})
						}else{
							this.tishi()
						}
						
					break;
				}
			},
			//支付
			pay(Obj){
				if(this.formData.linkman==""){
					uni.showToast({
						icon:"none",
						title:"服务地址不能为空！",
						duration:2000
					})
					return
				}
				if(this.formData.yu_yue_date==""){
					uni.showToast({
						icon:"none",
						title:"服务日期不能为空！",
						duration:2000
					})
					return
				}
				if(this.formData.startTimeData==""){
					uni.showToast({
						icon:"none",
						title:"预约到达时间不能为空！",
						duration:2000
					})
					return
				}
				uni.showModal({
					title:'提示',
					content:'确认服务地址与服务日期时间无误，达到时间范围不的少于半小时哟～',
					cancelText:"取消",
					confirmText:"确定",
					success: (res) => {
						if (res.confirm) {
							this.$api.EditFuYu(this.formData).then(res1=>{
								if(res1.code==0){
									uni.showToast({
										icon:"success",
										title:"预约成功!",
										duration:2000
									})
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1500)
								}
							})
						}
					}
				})
			},
			//确认预约服务
			async GetOrderInfo(){
				const one={
					mid:this.user_id,
					id:this.id
				}
				await this.$api.GetFuYuShow(one).then(res=>{
					this.formData=res.data.fu_yu
					this.startTimeData=res.data.fu_yu.start_default_time+"-"+res.data.fu_yu.end_default_time
					this.region=res.data.region
				})
			},
			//修改提示
			tishi(){
				uni.showToast({
					icon:"none",
					title:"当前状态无法修改，请先点击修改预约按钮～",
					duration:2000
				})
			},
			//验证是否在服务区域
			IsFuwu(Obj){
				let isfuwu=false
				for(let i=0;i<this.region.length;i++){
					if(this.region[i].city==Obj.city){
						const NewArr=JSON.parse(this.region[i].pricedata)
						NewArr.forEach(item=>{
							if(item.district[0].fullname==Obj.district){
								item.area.forEach(element=>{
									if(element.fullname==Obj.area){
										isfuwu=true
									}
								})
							}
						})
					}
				}
				return isfuwu
			}
		}
	}
</script>

<style lang="scss">
	body{
	    background-color: #f6f6f6;  
	} 
	image{
		width: 100%;
		display: block;
	}
	.order-top{
		height: 220rpx;
		background: url("../../static/ordertop.png") no-repeat;
		background-size: 100%;
	}
	.address{
		border-bottom-left-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
		.you{
			.icon-jinrujiantou1{
				font-size: 40rpx;
			}
			.icon-dingwei{
				font-size: 50rpx;
			}
		}
		
	}
	.shop{
		border-radius: 25rpx;
		.logo{
			width: 30rpx;
			height: 30rpx;
		}
		.left{
			width: 175rpx;
			height: 175rpx;
		}
		.right{
			width: 505rpx;
		}
		textarea{
			height: 150rpx;
			padding: 20rpx 30rpx;
		}
	}
	.ljm-checkbox{
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid #999999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ljm-checkbox.ljm-checkbox-active{
		background-color: #e5353f;
		border: 2rpx solid #e5353f;
	}
	.ljm-checkbox .icon-duihao{
		font-size: 22rpx;
	}
	.fuwu-foot{
		border-top-left-radius: 35rpx;
		border-top-right-radius: 35rpx;
		padding: 30rpx 50rpx;
		.coupon-foot{
			max-height: 400rpx;
			.coupon-item{
				.left{
					width: 200rpx;
					border-right: 2rpx solid #E7E7E7;
				}
				.right{
					.btnCoupon{
						padding: 0 30rpx;
						background-color: #DDDDDD;
					}
				}
			}
		}
	}
	textarea{
		width: 500rpx;
		height: 150rpx;
		padding: 20rpx 30rpx;
	}
</style>